<template>
  <div id="one">
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column label="id" prop="id"> </el-table-column>
    <el-table-column  label="title"  prop="title"></el-table-column>
    <el-table-column label="context" prop="context"> </el-table-column>
    <el-table-column label="anthor" prop="anthor"> </el-table-column>
    <el-table-column  align="right">

      <template slot="header">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>

      <!-- 编辑按钮 -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row.id)">Edit</el-button>

         <!-- 删除按钮 -->
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
<Hello ref="hl"></Hello>
  </div>
</template>
<script>
import Hello from "../../components/HelloWorld"
  export default {
    data() {
      return {
        tableData:[],
        search: ''
      }
    },
    created(){
      this.$api.getlist().then(res=>{
        this.tableData=res.data
      })
    },
    components:{
      Hello
    },
    methods: {
      handleEdit(id) {
        this.$refs.hl.dialogFormVisible=true
      
      },
      handleDelete(id) {
       this.$api.dellist(id).then(res=>{
         if(res.code===1){
           this.$api.getlist().then(res=>{
            this.tableData=res.data
           })
         }
       })
      }
    },
  }
</script>
<style lang="scss">
// html,body,#app{
//   width: 100%;
//   height: 100%;
//   display: flex;
//   flex-direction: column;
// }
// *{
//   margin: 0;
//   padding: 0;
//   list-style: none;
// }
// .box{
//   display: flex;
//   flex-direction: column;
  
//   .box1{
//     display: flex;
//     flex-direction: column;
    
//     margin-top: 20px;
//   }
// }
</style>